<template>
    <div class="main_Box">
        <div class="top_tab">
            <div @click.stop="goBack" class="top_flex_back">
                <img src="../../../assets/image/zxl/fanhui.png" style="width: 8px;height: 12px;margin-right: 4px;">
                <span>返回</span>
            </div>
            <div>
                <el-pagination ref="paginationRef" layout="prev, jumper, next" :page-size="1" :total="totalPages"
                    v-model:current-page="currentPage" @current-change="handleCurrentChange" />
            </div>
            <div class="top_entry">
                <button @click="confirm">发起合同</button>
            </div>
        </div>
        <div class="bottom_tab">
            <div class="left_box">
                <div class="left_area" v-if="htType != 3">
                    <div class="area_name">选择签署方</div>
                    <div :class="signIndex == index ? 'area_sign1' : 'area_sign2'" v-for="(item, index) in signArr"
                        @click="setSelect(index)">
                        <img class="sign_icon" src="../../../assets/image/zxl/xuanzhong.png" v-if="signIndex == index">
                        <img class="sign_icon" src="../../../assets/image/zxl/weixuanzhong.png"
                            v-if="signIndex != index">
                        <div class="area_sign_right">
                            <div class="area_sign_type">{{ item.join_type == 1 ? '个人' : '企业' }} 签署方</div>
                            <div class="area_sign_name">{{ item.join_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="left_area" v-if="htType == 3">
                    <div class="area_name">选择签署方</div>
                    <div :class="signIndex == index ? 'area_sign1' : 'area_sign2'" v-for="(item, index) in signArr.slice(0,1)"
                        @click="setSelect(index)">
                        <img class="sign_icon" src="../../../assets/image/zxl/xuanzhong.png" v-if="signIndex == index">
                        <img class="sign_icon" src="../../../assets/image/zxl/weixuanzhong.png"
                            v-if="signIndex != index">
                        <div class="area_sign_right">
                            <div class="area_sign_type">个人 签署方</div>
                            <div class="area_sign_name">员工</div>
                        </div>
                    </div>
                </div>
                <div class="left_area">
                    <div class="area_name">拖动签署位置</div>
                    <div class="area_drag" draggable="true"
                        @dragstart="handleDragStart($event, signArr[signIndex].join_type == 1 ? 'name1' : 'name2')">
                        <span>签署区</span>
                        <img src="../../../assets/image/zxl/sign_img1.png" class="area_drag_icon">
                    </div>
                    <div class="area_drag" draggable="true" @dragstart="handleDragStart($event, 'date')">
                        <span>签署时间</span>
                        <img src="../../../assets/image/zxl/sign_img2.png" class="area_drag_icon">
                    </div>
                    <div class="area_drag" draggable="true" @dragstart="handleDragStart($event, 'place')"
                        v-if="signArr.length != 0 && signArr[signIndex].join_type == 2 && totalPages > 1">
                        <span>骑缝章</span>
                        <img src="../../../assets/image/zxl/sign_img3.png" class="area_drag_icon">
                    </div>
                </div>
                <div class="left_area">
                    <div class="area_name">指定签署区域说明</div>
                    <div class="area_tip">请先选择签署方，并拖动签署区至适合的签署位置，最终签署效果和预览效果一致</div>
                </div>
            </div>
            <div class="middle_box" ref="docWrapperRef">
                <!-- 模拟文档内容 -->
                <div ref="pageWrapperRef" @scroll="handleScroll" class="scroll-container">
                    <div v-if="totalPagesImg.length != 0" class="page-container" ref="pageRefs"
                        v-for="page in totalPages" :key="page" @dragover.prevent @dragenter="handleDragEnter(page)"
                        @drop="handleDrop($event, page)">
                        <!-- 每页的文档图片（模拟多页） -->
                        <img :src="totalPagesImg[page - 1].filePath" alt="第{{ page }}页文档" class="document-img">
                        <!-- <span>{{ totalPagesImg[page-1].filePath  }}</span> -->

                        <div v-for="item in placedAreas.filter(a => a.page === page)" :key="item.ids" draggable="true"
                            :style="{
                                left: `${item.abscissa_x}px`,
                                top: `${item.ordinate_y}px`,
                                width: getAreaSize(item.type).width,
                                height: getAreaSize(item.type).height
                            }" class="placed-area" :class="`type-${item.type}`"
                            @dragstart="handleAreaDragStart($event, item, page)"
                            @dragover="handleAreaDragOver($event, item, page)"
                            @dragend="handleAreaDragEnd($event, item, page)">
                            <div class="area-label">
                                <img v-if="item.type == 'name1'" style="width: 100%;height: 100%;"
                                    src="../../../assets/image/zxl/sign_bg2.png"></img>
                                <img v-if="item.type == 'name2'" style="width: 100%;height: 100%;"
                                    src="../../../assets/image/zxl/sign_bg1.png"></img>
                                <img v-if="item.type == 'date'" style="width: 100%;height: 100%;"
                                    :src="daySeal ? daySeal : '../../../assets/image/zxl/sign_bg3.png'"></img>
                                <img v-if="item.type == 'place'" style="width: 100%;height: 100%;"
                                    src="../../../assets/image/zxl/sign_bg4.png"></img>
                            </div>
                            <div class="area-label1" v-if="item.type != 'place'">
                                {{ item.join_type == 1 ? "个人" : '企业' }}
                            </div>
                            <button class="delete-btn" v-if="item.type != 'place'" @click.stop="deleteArea(item.ids)"
                                title="删除">
                                ×
                            </button>
                            <button class="delete-btn1" v-if="item.type == 'place'" @click.stop="deleteArea(item.ids)"
                                title="删除">
                                ×
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="right_area">
                    <div class="area_name">文件列表</div>
                    <div class="area_file">
                        <img class="area_img" :src="rightFileImg">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import { useRouter, useRoute } from 'vue-router';
import type { ElMessage, ElMessageBox } from 'element-plus'
import { getContractDetail, startContract } from "@/api/xl";

const router = useRouter();
const route = useRoute();
const props = defineProps({
    contract_id: {
        type: String,
        default: '' // 对象/数组默认值需返回函数
    }
})

//测试区域
onMounted(async () => {
    await nextTick(); // 等待DOM渲染完成

    getContractInfo()

    const date = new Date();
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    currentDate.value = `${year}-${month}-${day}`;
});

const totalPages = ref(1);// 总页数
const totalPagesImg = ref([]);// 总页数
const pageWrapperRef = ref(null);// 滚动容器
const docWrapperRef = ref(null);
const currentDate = ref('');
const pageRefs = ref([]);//所有页的DOM引用
const paginationRef = ref(null);
// 页面尺寸与滚动状态
const pageHeight = ref(0); // 单页高度
const currentPage = ref(1); // 当前显示的页码
const targetPage = ref(1); // 页码输入框绑定的值
// 当前拖拽的签署区域类型
const draggingType = ref(null);
const currentDraggedPage = ref(1); // 记录拖拽时所在的页码
// 签署区域数据（仅记录页内坐标，不记录绝对位置）
const placedAreas = ref([]);
const rightFileImg = ref('');
const daySeal = ref('');
const htType = ref(0);

// 拖拽状态变量
const draggingState = ref({
    isDragging: false,
    currentArea: null, // 当前拖拽的区域
    startPos: { mouseX: 0, mouseY: 0, areaX: 0, areaY: 0 }, // 初始位置
    pageRect: null, // 当前页面尺寸缓存
    areaSize: null // 区域尺寸缓存
});

const getContractInfo = () => {
    getContractDetail(props.contract_id).then(res => {
        console.log(res)
        //设置页码
        totalPages.value = res.data.imgCount;
        totalPagesImg.value = res.data.images;
        daySeal.value = res.data.daySeal;
        rightFileImg.value = res.data.images[0].filePath;
        const classifier = paginationRef.value.$el.querySelector('.el-pagination__classifier')
        if (classifier) {
            classifier.textContent = '/ ' + totalPages.value  // 改为你需要的文字
        }
        setTimeout(() => {
            if (pageRefs.value.length) {
                // 获取单页高度（用于计算页码和位置）
                pageHeight.value = pageRefs.value[0].offsetHeight;
            }
        }, 1000)
        //签署方
        signArr.value = res.data.joins;
        htType.value = Number(res.data.type);//判断是否是规章制度
    });
}

// 拖拽开始
const handleAreaDragStart = (e: DragEvent, area: any, page: number) => {
    // 缓存页面和区域信息（只计算一次）
    const pageEl = pageRefs.value[page - 1];
    draggingState.value = {
        isDragging: true,
        currentArea: { ...area }, // 深拷贝避免直接修改
        startPos: {
            mouseX: e.clientX,
            mouseY: e.clientY,
            areaX: area.abscissa_x,
            areaY: area.ordinate_y
        },
        pageRect: pageEl.getBoundingClientRect(),
        areaSize: getAreaSize(area.type)
    };

    // 设置拖拽图像（可选，增强视觉反馈）
    const dragImg = document.createElement('div');
    dragImg.style.width = draggingState.value.areaSize.width;
    dragImg.style.height = draggingState.value.areaSize.height;
    dragImg.style.opacity = '0.5';
    document.body.appendChild(dragImg);
    e.dataTransfer.setDragImage(dragImg, 0, 0);
    setTimeout(() => document.body.removeChild(dragImg), 0);
};

// 拖拽过程中（核心：实时更新位置）
const handleAreaDragOver = (e: DragEvent, area: any, page: number) => {
    e.preventDefault();
    if (!draggingState.value.isDragging) return;

    const { startPos, pageRect, areaSize, currentArea } = draggingState.value;
    const areaWidth = parseInt(areaSize.width);
    const areaHeight = parseInt(areaSize.height);

    requestAnimationFrame(() => {
        let offsetX = e.clientX - startPos.mouseX;
        let offsetY = e.clientY - startPos.mouseY;

        // 骑缝章特殊处理：X轴强制贴右边（保持骑缝效果），只允许Y轴移动
        if (currentArea.type === 'place') {
            // X轴固定在右侧（与创建时逻辑一致）
            offsetX = 0; // 取消X轴偏移，保持贴边
            // 只允许Y轴移动（确保骑缝章在页面边缘上下拖动）
        }

        // 计算新坐标
        let newX = startPos.areaX + offsetX;
        let newY = startPos.areaY + offsetY;

        // 边界限制（骑缝章X轴强制贴边）
        if (currentArea.type === 'place') {
            newX = pageRect.width - areaWidth - 1; // 固定X轴位置（与创建时一致）
        } else {
            newX = Math.max(0, Math.min(newX, pageRect.width - areaWidth));
        }
        newY = Math.max(0, Math.min(newY, pageRect.height - areaHeight));

        // 在计算出新坐标后，判断是否为骑缝章
        if (currentArea.type === 'place') {
            // 批量更新所有同ID的骑缝章（因为骑缝章所有页ids相同）
            placedAreas.value = placedAreas.value.map(item => {
                if (item.ids === currentArea.ids) {
                    return { ...item, abscissa_x: newX, ordinate_y: newY };
                }
                return item;
            });
        } else {
            // 普通区域只更新当前页
            const index = placedAreas.value.findIndex(item => item.ids === currentArea.ids);
            if (index !== -1) {
                placedAreas.value[index] = { ...placedAreas.value[index], abscissa_x: newX, ordinate_y: newY };
            }
        }

        // 找到当前区域并更新坐标
        const index = placedAreas.value.findIndex(item => item.ids === currentArea.ids);
        if (index !== -1) {
            placedAreas.value[index] = {
                ...placedAreas.value[index],
                abscissa_x: newX,
                ordinate_y: newY
            };
        }
    });
};

// 拖拽结束
const handleAreaDragEnd = (e: DragEvent) => {
    draggingState.value.isDragging = false;
    // 清除临时状态
    draggingState.value = {
        isDragging: false,
        currentArea: null,
        startPos: { mouseX: 0, mouseY: 0, areaX: 0, areaY: 0 },
        pageRect: null,
        areaSize: null
    };
};

const handleScroll = () => {
    if (!pageWrapperRef.value || !pageHeight.value) return;

    const scrollTop = pageWrapperRef.value.scrollTop;
    // 计算当前页：滚动距离 / 单页高度 → 向下取整 + 1
    currentPage.value = Math.floor(scrollTop / pageHeight.value) + 1;
    currentPage.value = Math.max(1, Math.min(currentPage.value, totalPages.value));
    targetPage.value = currentPage.value;
}

// 拖拽进入页面时：实时更新当前所在页码（关键）
const handleDragEnter = (page) => {
    currentDraggedPage.value = page; // 无论是否滚动，只要拖拽进入某页就记录
};

const handleCurrentChange = (page) => {
    console.log(page)
    const validPage = Math.max(1, Math.min(page, totalPages.value));
    console.log(validPage)
    targetPage.value = validPage;
    currentPage.value = validPage;
    if (pageWrapperRef.value && pageHeight.value) {
        pageWrapperRef.value.scrollTo({
            top: (validPage - 1) * pageHeight.value,
            behavior: 'smooth'
        });
    }
}


// 开始拖拽：记录类型和基础数据
const handleDragStart = (e, type) => {
    draggingType.value = type;
    // 存储元素尺寸（用于限制边界）
    const size = getAreaSize(type);
    e.dataTransfer.setData('text/plain', JSON.stringify(size));
};

// 放置元素：坐标完全跟随鼠标位置（限制在容器内）
const handleDrop = (e, page) => {
    if (!draggingType.value) return;

    // 获取当前页容器的位置信息（相对于页容器自身）
    const pageEl = pageRefs.value[page - 1]; // 页容器索引从0开始
    if (!pageEl) return;

    const pageRect = pageEl.getBoundingClientRect();
    const size = JSON.parse(e.dataTransfer.getData('text/plain'));
    const width = parseInt(size.width);
    const height = parseInt(size.height);

    // 计算相对于当前页容器的坐标（关键：完全基于页内位置）
    const x = e.clientX - pageRect.left;
    const y = e.clientY - pageRect.top;

    // 限制坐标在当前页内
    const limitedX = Math.max(0, Math.min(x - width / 2, pageRect.width - width));
    const limitedY = Math.max(0, Math.min(y - height / 2, pageRect.height - height));

    let result = ''
    result += Math.floor(Math.random() * 9) + 1
    for (let i = 1; i < 12; i++) {
        result += Math.floor(Math.random() * 10)
    }

    // 骑缝章吸边逻辑
    let finalX = limitedX;
    if (draggingType.value === 'place') {
        const distanceToLeft = x;
        const distanceToRight = pageRect.width - x;
        finalX = distanceToLeft <= distanceToRight ? (pageRect.width - width - 1) : (pageRect.width - width - 1);
    }

    if (draggingType.value === 'place') {
        for (let i = 0; i < totalPages.value; i++) {
            placedAreas.value.push({
                ids: result,
                task_id: signArr.value[signIndex.value].task_id,
                join_id: signArr.value[signIndex.value].userId,
                join_name: signArr.value[signIndex.value].join_name,
                join_type: '',
                join_phone: signArr.value[signIndex.value].join_phone,
                type: draggingType.value,
                page: i + 1,
                abscissa_x: finalX, // 相对于容器的X坐标
                ordinate_y: limitedY  // 相对于容器的Y坐标
            });
        }
    } else {
        //添加到已放置列表（记录精确坐标）
        placedAreas.value.push({
            ids: result,
            task_id: signArr.value[signIndex.value].task_id,
            join_id: signArr.value[signIndex.value].userId,
            join_name: signArr.value[signIndex.value].join_name,
            join_type: signArr.value[signIndex.value].join_type,
            join_phone: signArr.value[signIndex.value].join_phone,
            type: draggingType.value,
            page: page,
            abscissa_x: finalX, // 相对于容器的X坐标
            ordinate_y: limitedY  // 相对于容器的Y坐标
        });
    }

    console.log(placedAreas)

    draggingType.value = null;

};

const confirm = () => {
    if (placedAreas.value.length == 0) {
        ElMessage({
            message: '请先拖拽签署区',
            grouping: true,
            type: "error",
        });
        return
    }
    startContract({
        task_id: props.contract_id,
        signarea: placedAreas.value
    }).then(res => {
        console.log(res)
        if (res.code == 1) {
            ElMessage({
                message: res.msg,
                grouping: true,
                type: "success",
            });
            router.push({ path: '/SigningCenter' })
        } else {
            ElMessage({
                message: res.msg,
                grouping: true,
                type: "error",
            });
            // router.push({ path: '/SigningCenter' })
        }
    });
}

// 删除签署区域
const deleteArea = (id) => {
    placedAreas.value = placedAreas.value.filter(item => item.ids !== id);
};

// 签署区域尺寸配置
const getAreaSize = (type) => {
    const sizes = {
        name1: { width: '142px', height: '48px' },
        name2: { width: '142px', height: '142px' },
        date: { width: '140px', height: '40px' },
        place: { width: '82px', height: '142px' }
    };
    return sizes[type];
};
//测试区域



const signIndex = ref(0)
const signArr = ref([]);

const goBack = () => {
    //router.push({ name: 'employeeList' });
    router.back()
}

const setSelect = (index) => {
    signIndex.value = index;
}

onBeforeUnmount(() => {

});

</script>
<style scoped>
::v-deep .el-pagination__jump {
    margin-left: 0 !important;
}

::v-deep .el-pagination__goto {
    display: none;
}

::v-deep .el-pagination .el-input__inner {
    font-size: 14px !important;
}

::v-deep .el-input__wrapper {
    padding: 0 !important;
}

/* ::v-deep .el-pagination__classifier {
    display: none;
} */

/* 拖拽中样式 */
.placed-area[draggable="true"] {
    cursor: grab;
    transition: transform 0.08s ease-out;
    will-change: left, top;
    /* 告诉浏览器优化这两个属性 */
}

.placed-area[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.8;
    transform: scale(1.01);
    /* 轻微缩放增强手感 */
}

/* 拖拽过程中页面高亮 */
/* .page-container:has(.placed-area[draggable="true"]:active) {
  background-color: rgba(24, 144, 255, 0.03);
} */

/* 骑缝章拖拽样式 */
.placed-area.type-place[draggable="true"] {
    cursor: grab;
}

.placed-area.type-place[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.8;
    /* 骑缝章是竖条，拖拽时轻微放大高度增强反馈 */
    transform: scaleY(1.05);
}

.scroll-container {
    height: 100%;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 6px;
    position: relative;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.drop-target {
    flex: 1;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    /* 使内部元素可绝对定位 */
    overflow: hidden;
    min-height: 600px;
}

/* 单页容器样式 */
.page-container {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    /* 相邻页之间添加分隔线 */
    border-bottom: 1px solid #e0e0e0;
}

/* 文档图片样式 */
.document-img {
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.mock-document {
    padding: 40px;
    line-height: 2;
    color: #333;
    border-bottom: 1px solid #eee;
}

.doc-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 40px 0;
}

.doc-content {
    margin: 15px 0;
    font-size: 16px;
}

.placed-area {
    position: absolute;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
    box-sizing: border-box;
}

.placed-area:hover {
    /* box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.5); */
}

.type-name1 {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-name2 {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-date {
    /* background-color: rgba(24, 144, 255, 0.05); */
}

.type-place {
    /* background-color: rgba(24, 144, 255, 0.05); */
    /* border-radius: 50%; */
}

.area-label {
    /* border: 2px dashed #1890ff; */
    /* border-bottom: 0px dashed #1890ff; */
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
}

.area-label1 {
    background-color: #3887e1;
    /* border-bottom: 0px dashed #1890ff; */
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    height: 100%;
    margin-top: 1px;
    padding: 2px 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.signer-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    font-size: 12px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.05);
}

/* 删除按钮 */
.delete-btn {
    position: absolute;
    top: -16px;
    right: -8px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #ff4d4f;
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.delete-btn1 {
    position: absolute;
    top: -8px;
    right: 72px;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background-color: #ff4d4f;
    color: white;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
}

.delete-btn:hover {
    background-color: #f5222d;
}


.main_Box {
    overflow-y: scroll;
    height: 100%;

    &::-webkit-scrollbar {
        display: none;
    }
}

.top_tab {
    width: 100%;
    height: 56px;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-radius: 12px;
    justify-content: space-between;

    .top_flex_back {
        font-size: 16px;
        color: #333;
        cursor: pointer;
        margin-left: 18px;
        /* flex: 1; */
    }
}

.top_entry {
    margin-right: 29px;

    button {
        background-color: #01509f;
        color: #fff;
        width: 108px;
        height: 36px;
        border: 0px solid #eaeaea;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
    }

    button:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

.bottom_tab {
    margin-top: 22px;
    width: 100%;
    height: calc(100% - 78px);
    display: flex;
    justify-content: space-between;

    .left_box {
        width: 246px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;

        .left_area {
            margin-bottom: 32px;

            .area_name {
                color: #01509f;
                font-size: 18px;
                font-weight: bolder;
                margin-bottom: 5px;
            }

            .area_sign1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 210px;
                height: 74px;
                box-sizing: border-box;
                margin-top: 14px;
                border-radius: 6px;
                border: 1px solid #01509f;
                background-color: #e8f0ff;
                cursor: pointer;
            }

            .area_sign2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 210px;
                height: 74px;
                box-sizing: border-box;
                margin-top: 14px;
                border-radius: 6px;
                border: 1px solid #eaeaea;
                background-color: #f6f7f9;
                cursor: pointer;
            }

            .sign_icon {
                width: 14px;
                height: 14px;
                margin-right: 7px;
            }

            .area_sign_right {

                .area_sign_type {
                    font-size: 14px;
                    color: #666;
                }

                .area_sign_name {
                    font-size: 16px;
                    color: #333;
                    overflow-x: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 160px;
                }
            }

            .area_tip {
                font-size: 14px;
                color: #333;
            }

            .area_drag {
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                width: 208px;
                height: 38px;
                box-sizing: border-box;
                margin-top: 14px;
                border-radius: 6px;
                border: 1px dashed #cccccc;
                font-size: 14px;
                color: #666;
                cursor: pointer;

                .area_drag_icon {
                    position: absolute;
                    right: 8px;
                    top: 13px;
                }
            }
        }
    }

    .middle_box {
        width: 756px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        position: relative;
    }

    .right_box {
        width: 246px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;

        .right_area {
            margin-bottom: 32px;

            .area_name {
                color: #01509f;
                font-size: 18px;
                font-weight: bolder;
                margin-bottom: 5px;
                width: 100%;
                border-bottom: 1px solid #eaeaea;
                padding-bottom: 16px;
            }

            .area_file {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .area_img {
                    width: 152px;
                    height: 320px;
                }
            }
        }
    }
}
</style>